<template>
  <div>
    <div class="fns-look-img">
      <div class="fns-look-imgBox" v-for="(item, index) in imgSrc" :key="index" @mouseover="imgOver()" @mouseleave="imgLeave()">
        <img  :src="item.imageUrl"  alt="图片">
        <div class="item" v-if="zoomShow" @click="zoomImg(index)" >
          <div  class="el-icon-zoom-in" ></div>
        </div>
      </div>
    </div>
    <div>
      <fns-img-dialog :imgDialogData="imgDialogData"></fns-img-dialog>
    </div>
  </div>


</template>

<script>
  import fnsImgDialog from '@/components/common/imgDialog'
  export default {
    props: {
      imgSrc: {
        default: []
      }
    },
    computed: {
    },
    watch: {
    },
    components: {
      fnsImgDialog
    },
    data() {
      return {
        zoomShow: false,
        imgDialogData: {
          imgSrc: [],
          dialogVisible: false,
          index: 0      // 初始状态激活的幻灯片的索引
        }
      }
    },
    methods: {
      // 图片事件
      imgOver() {
        this.zoomShow = true
      },
      imgLeave() {
        this.zoomShow = false
      },
      zoomImg(index) {
        this.imgDialogData.index = index
        this.imgDialogData.imgSrc = this.imgSrc
        this.imgDialogData.dialogVisible = true
      }
    }
  }
</script>

<style lang="scss">
  /* 查看图片lookImg*/
  .fns-look-imgBox {
    display: inline;
    float: left;
    width: 130px;
    height: 90px;
    border: 1px solid #ebebeb;
    padding: 1px;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    img {
      width: 128px;
      height: 88px;
    }
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      .el-icon-zoom-in {
        color: #f5f5f5;
        line-height: 40px;
        width: 20px;
        margin-left: 10px;
      }
    }
  }
</style>
